import React, { useState, useEffect, useCallback } from 'react';
import { Table, Radio } from 'antd';
import { flatTryCatch } from '../../../servers/http';
import { homeOutboundRank } from 'admin/servers/servers';
import { timeOptions, whColumns } from './constant';
import type { ITimeSpan } from './constant';

const ThirdCallOut: React.FC = () => {
  const [timeSpan, setTimeSpan] = useState<ITimeSpan>(timeOptions[0].value);
  const [rangData, setRangData] = useState<any>([]);
  const [loading, setLoading] = useState(false);

  // 请求数据
  const fetchData = useCallback(async () => {
    setLoading(true);
    const { response, error } = await flatTryCatch(homeOutboundRank(timeSpan));
    setLoading(false);
    if (error) return;
    setRangData(response.data.intelligencecallCall);
  }, [timeSpan]);

  // 初始化加载和timeSpan变化时加载数据
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 处理时间范围变化
  const handleTimeSpanChange = (e: any) => {
    setTimeSpan(e.target.value);
  };

  return (
    <div className="single-item">
      <div className="single-title-wrapper">
        <div className="single-title">智能外呼排名</div>
        <Radio.Group
          value={timeSpan}
          onChange={handleTimeSpanChange}
          buttonStyle="solid"
          optionType="button"
          options={timeOptions}
          size="small"
        />
      </div>

      <Table
        loading={loading}
        dataSource={rangData}
        columns={whColumns}
        pagination={false}
        rowKey="name"
      />
    </div>
  );
};

export default ThirdCallOut;
